<template>
  <div class="menu-detail">
    <!-- 详情头部 -->
    <DetailHeader :info="menuInfo"></DetailHeader>
    <!-- 主要步骤 -->
    <DetailContent :info="menuInfo"></DetailContent>
    <!-- 菜单评论 -->
    <Comment :info="menuInfo"></Comment>
  </div>
</template>

<script>
import DetailHeader from "./Detail-header.vue";
import DetailContent from "./Detail-content.vue";
import Comment from "./Comment.vue";
import { getMenuInfo } from "@/apis/menu.js";
export default {
  name: "Detail",
  components: {
    DetailHeader,
    DetailContent,
    Comment,
  },
  data() {
    return {
      menuInfo: {
        userInfo: {},
        createdAt: "",
        // 接收菜谱的详细信息
        raw_material: {
          main_material: [],
          accessories_material: [],
        },
        steps: [],
      },
    };
  },
  watch: {
    // 监听路由
    $route: {
      handler() {
        // 获取菜谱的id值
        const { menuId } = this.$route.query;
        // 判断是否有id值
        if (menuId) {
          // 有 发送请求
          getMenuInfo({ menuId }).then((res) => {
            // console.log(res);
            this.menuInfo = res.data.info;
            // console.log(this.menuInfo);
          });
        } else {
          // 没有，消息提示
          this.$message({
            showClose: true,
            message: "请重新进入！",
            type: "warning",
          });
        }
      },
      //立即执行
      immediate: true,
    },
  },
};
</script>

<style lang="stylus" scoped></style>